<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>确认订单-魅族商场</title>
    <link rel="stylesheet" href="assets/icomoon/style.css">
    <link rel="stylesheet" href="css/1reset.css">
    <link rel="stylesheet" href="css/2index.css">
    <link rel="stylesheet" href="css/8order.css">
</head>
<body>
    <header>
        <div class="container">
        <a href="index.html" class="logo">
        <img src="assets/images/logo_blue.png" alt="">
    </a>
        <ul class="header-left">
            <li>购物车</li>
            <li style="color:#333;">确认订单</li>
            <li>在线支付</li>
            <li>完成</li>
        </ul>
        <ul class="header-right">
            <li><a href="personal.html">我的订单</a></li>
            <li><a href="personal.html">个人中心</a></li>
        </ul>
    </div>
    </header>
    <div class="order">
        <div class="container">
            <div class="address">
                <div class="address-title">收货人地址</div>
                <ul class="address-list">
                    <li class="address-checkbox add">
                        <div class="address-add"></div>
                        <span>添加新地址</span>
                    </li>
                </ul>
            </div>
            <div class="order-product">
                <div class="product-title">确认订单信息</div>
                <div class="product-list">
                    <table cellpadding="0" cellspacing="0">
                        <thead>
                            <tr>
                                <th class="table-name">供应商：魅族</th>
                                <th class="table-price">单价</th>
                                <th class="table-num">数量</th>
                                <th class="table-total">小计</th>
                                <th class="table-express">配送方式</th>
                            </tr>
                        </thead>
                        <tbody>
                        
                        </tbody>
                        <tfoot>
                            <tr class="table-footer">
                                <td colspan="3" class="table-info">
                                    <div class="invoice">
                                        <div class="invoice-type">发票类型：电子发票
                                            <div class="invoice-icon"></div>
                                        </div>
                                        <span>修改</span>
                                        <div class="invoice-info">
                                            发票抬头：默认为收货人姓名
                                        </div>
                                    </div>
                                </td>
                                <td colspan="2" class="table-product-total">
                                    合计：<span class="product-totalPrice"></span>
                                </td>
                            </tr>
                            <tr class="table-remark">
                                <td colspan="5">
                                    <span>备注：</span>
                                    <textarea maxlength="45"></textarea>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
            <div class="order-total clearfix">
            <div class="order-pay">
                <div class="order-pay-title">选择支付方式</div>
                <div class="order-pay-content">
                    <div class="order-pay-row clearfix">
                        <div class="order-pay-total">快捷支付</div>
                        <ul class="order-pay-list">
                            <li class="active">
                                <div class="list-radio"><p></p>
                                </div>
                                <div class="list-img">
                                    <img src="assets/images/order/1.png" alt="">
                                </div>
                            </li>
                            <li>
                                <div class="list-radio"><p></p></div>
                                <div class="list-img">
                                    <img src="assets/images/order/2.png" alt="">
                                </div>
                            </li>
                            <li>
                                <div class="list-radio"><p></p></div>
                                <div class="list-img">
                                    <img src="assets/images/order/3.png" alt="">
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="order-pay-row clearfix">
                        <div class="order-pay-total">网上银行</div>
                        <ul class="order-pay-list">
                            <li>
                                <div class="list-radio"><p></p></div>
                                <div class="list-img">
                                    <img src="assets/images/order/4.png" alt="">
                                </div>
                            </li>
                            <li>
                                <div class="list-radio"><p></p></div>
                                <div class="list-img">
                                    <img src="assets/images/order/5.png" alt="">
                                </div>
                            </li>
                            <li>
                                <div class="list-radio"><p></p></div>
                                <div class="list-img">
                                    <img src="assets/images/order/6.png" alt="">
                                </div>
                            </li>
                            <li>
                                <div class="list-radio"><p></p></div>
                                <div class="list-img">
                                    <img src="assets/images/order/7.png" alt="">
                                </div>
                            </li>
                            <li>
                                <div class="list-radio"><p></p></div>
                                <div class="list-img">
                                    <img src="assets/images/order/8.png" alt="">
                                </div>
                            </li>
                            <li>
                                <div class="list-radio"><p></p></div>
                                <div class="list-img">
                                    <img src="assets/images/order/9.png" alt="">
                                </div>
                            </li>
                            <li>
                                <div class="list-radio"><p></p></div>
                                <div class="list-img">
                                    <img src="assets/images/order/10.png" alt="">
                                </div>
                            </li>
                            <li>
                                <div class="list-radio"><p></p></div>
                                <div class="list-img">
                                    <img src="assets/images/order/11.png" alt="">
                                </div>
                            </li>
                            <li>
                                <div class="list-radio"><p></p></div>
                                <div class="list-img">
                                    <img src="assets/images/order/12.png" alt="">
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="order-total-content">
                <div class="order-total-row">
                    总金额：
                    <span class="order-total-price"></span>
                </div>
                <div class="order-total-row">
                    运费：
                    <span>￥0.00</span>
                </div>
                <div class="order-total-line"></div>
                <div class="order-total-row">
                    应付：
                    <span class="order-total-price total"></span>
                </div>
                <div class="order-total-row valid-row clearfix">
                    <div class="mz-btn">下单并支付</div>
                    <div class="order-tips-warp">
                        <div class="order-tips">该订单含付款减库存商品，支付完成后才会为您预留库存！
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
    <div class="mz-mask mask1">
    <div class="address-adder">
        <div class="adder-header">
            <div class="adder-title">添加新地址</div>
            <div class="adder-close">×</div>
        </div>
        <div class="adder-main">
            <div class="adder-main-content">
                <div class="adder-cont">
                    <div class="adder-row clearfix">
                        <div class="adder-row-title">收货人姓名<span>*</span></div>
                        <div class="input-warp">
                            <input type="text" placeholder="姓名长度不可超过15个文字" maxlength="15" class="mz-input input-name">
                        </div>
                        <div class="adder-row-title">收货人手机号<span>*</span></div>
                        <div class="input-warp">
                            <input type="text" placeholder="请输入11位手机号" maxlength="11" class="mz-input input-phone">
                        </div>
                    </div>
                    <div class="adder-row clearfix">
                        <div class="adder-row-title">收货人地址<span>*</span></div>
                        <div class="input-warp">
                            <div id="sjld" style="width:520px;position:absolute;z-index: 999;">
                                <div class="m_zlxg" id="shenfen">                                   
                                    <p title="">选择省份</p>                                  
                                    <div class="m_zlxg2">                                   
                                        <ul></ul>                                   
                                    </div>                                
                                </div>                               
                                <div class="m_zlxg" id="chengshi">                                 
                                    <p title="">选择城市</p>                             
                                    <div class="m_zlxg2">                               
                                        <ul></ul>                               
                                    </div>                                  
                                </div>                                  
                                <div class="m_zlxg" id="quyu">                                  
                                    <p title="">选择区域</p>                                  
                                    <div class="m_zlxg2">                                   
                                        <ul></ul>                                   
                                    </div>
                                </div>
                                <input id="sfdq_num" type="hidden" value="" />
                                <input id="csdq_num" type="hidden" value="" />
                                <input id="sfdq_tj" type="hidden" value="" />
                                <input id="csdq_tj" type="hidden" value="" />
                                <input id="qydq_tj" type="hidden" value="" />
                            </div>
                        </div>
                    </div>
                    <div class="adder-row clearfix">
                        <div class="adder-row-title">详情地址<span>*</span></div>
                        <div class="input-warp">
                            <input type="text" placeholder="请输入4-50个文字的详细地址，例如路名、门牌号" maxlength="50" class="mz-input adder-detal">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="adder-bottom">
            <div class="btn-success">确认</div>
            <div class="btn-cancel">取消</div>
        </div>
    </div>
</div>
<div class="mz-mask mask2">
    <div class="address-adder">
        <div class="adder-header">
            <div class="adder-title">修改地址</div>
            <div class="adder-close">×</div>
        </div>
        <div class="adder-main">
            <div class="adder-main-content">
                <div class="adder-cont">
                    <div class="adder-row clearfix">
                        <div class="adder-row-title">收货人姓名<span>*</span></div>
                        <div class="input-warp">
                            <input type="text" placeholder="姓名长度不可超过15个文字" maxlength="15" class="mz-input input-name">
                        </div>
                        <div class="adder-row-title">收货人手机号<span>*</span></div>
                        <div class="input-warp">
                            <input type="text" placeholder="请输入11位手机号" maxlength="11" class="mz-input input-phone">
                        </div>
                    </div>
                    <div class="adder-row clearfix">
                        <div class="adder-row-title">收货人地址<span>*</span></div>
                        <div class="input-warp">
                            <div id="sjld" style="width:520px;position:absolute;z-index: 999;">
                                <div class="m_zlxg" id="shenfen">                                   
                                    <p title="">选择省份</p>                                  
                                    <div class="m_zlxg2">                                   
                                        <ul></ul>                                   
                                    </div>                                
                                </div>                               
                                <div class="m_zlxg" id="chengshi">                                 
                                    <p title="">选择城市</p>                             
                                    <div class="m_zlxg2">                               
                                        <ul></ul>                               
                                    </div>                                  
                                </div>                                  
                                <div class="m_zlxg" id="quyu">                                  
                                    <p title="">选择区域</p>                                  
                                    <div class="m_zlxg2">                                   
                                        <ul></ul>                                   
                                    </div>
                                </div>
                                <input id="sfdq_num" type="hidden" value="" />
                                <input id="csdq_num" type="hidden" value="" />
                                <input id="sfdq_tj" type="hidden" value="" />
                                <input id="csdq_tj" type="hidden" value="" />
                                <input id="qydq_tj" type="hidden" value="" />
                            </div>
                        </div>
                    </div>
                    <div class="adder-row clearfix">
                        <div class="adder-row-title">详情地址<span>*</span></div>
                        <div class="input-warp">
                            <input type="text" placeholder="请输入4-50个文字的详细地址，例如路名、门牌号" maxlength="50" class="mz-input adder-detal">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="adder-bottom">
            <div class="btn-success">确认</div>
            <div class="btn-cancel">取消</div>
        </div>
    </div>
</div>
    <div class="hxbottom"></div>
</body>
<script src="assets/jquery.js"></script>
<script src="assets/address.js"></script>
<script src="assets/jquery.cookie.js"></script>
<script src="js/order.js"></script>
<script>

    $(".hxbottom").load("reset.html .b",function(){
           // 底部小图标显示
    var language = $(".language");
    var language_ul = $(".language").find("ul");
    var subsrcibe_a1 = $(".subsrcibe").children("a").eq(0);
    var subsrcibe_a2 = $(".subsrcibe").children("a").eq(1);
    var subsrcibe_img1 = subsrcibe_a1.find("img");
    var subsrcibe_img2 = subsrcibe_a2.find("img");

    language.hover(function(){
        language_ul.stop().show()
    },function(){
        language_ul.stop().hide()
    })
    language_ul.hover(function(){
        language_ul.stop().show()
    },function(){
        language_ul.stop().hide()
    })
    
    subsrcibe_a1.hover(function(){
        subsrcibe_img1.stop().show()
    },function(){
        subsrcibe_img1.stop().hide()
    })
    subsrcibe_img1.hover(function(){
        subsrcibe_img1.stop().show()
    },function(){
        subsrcibe_img1.stop().hide()
    })
    subsrcibe_a2.hover(function(){
        subsrcibe_img2.stop().show()
    },function(){
        subsrcibe_img2.stop().hide()
    })
    subsrcibe_img2.hover(function(){
        subsrcibe_img2.stop().show()
    },function(){
        subsrcibe_img2.stop().hide()
    })
   
    })
</script>
</html>